<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
    事件的基本使用：
        1.v-on:事件名 或 @事件名
        2.事件的回调需要配置在methods对象中，最终在vm上
        3.methods中配置的函数 不要使用箭头函数，否则this就不是vm了
        4.methods中配置的函数 都是被Vue所管理的函数，this指向的事 vm 或 组件实例对象
        5.@click="demo" 和 @click="demo($event)" 一样，只不过后者可以传参
    -->

    <div id="root">
        <button v-on:click="showInfo1">点我（不传参）</button>
        <!-- 当需要传自定义参数，又需要event时，要显式地说明自己需要它$event    否则event参数就直接搞丢了 -->
        <button @click="showInfo2(666,$event)">点我（传参）</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false


        const vm = new Vue({
            data: {
                // ！函数一般不需要数据代理，函数是给人调的，而不是拿来改的。
                // 写进data会让vue很累。（showInfo3也有getter和setter了）
                // showInfo3(event) {
                //     console.log(event.target);
                //     console.log(this===vm);// 此处的this是vm
                    
                //     // alert("同学你好")
                // }
            },
            methods: {
                showInfo1(event) {
                    console.log(event.target);
                    console.log(this===vm);// 此处的this是vm
                    
                    // alert("同学你好")
                },
                showInfo2:(n,m)=> {
                    console.log(n);
                    console.log(m.target);
                    
                    // console.log(event.target);
                    // console.log(this);// 此处的this是window
                    
                    // alert("同学你好")
                }
            },
        })
        vm.$mount("#root")
    </script>
</body>

</html>